<template>
	<view class="sunui-tabbar margin-top_50rpx" :class="[fixed ? 'fixed' : '']">
	
		<view class="tablist flexbox flex_alignc sunui-bottom" :style="[{ 'background-color': backgroundColor ? backgroundColor : '' }]">
			<block v-for="(item, index) in tabList" :key="index">
				<view class="navigator flex-column-center" :class="current == index ? 'on' : ''" @tap="switchTab(index,item.url)">
					<image style="width: 56rpx;height: 56rpx;margin-top: 8rpx;margin-bottom: 2rpx;" v-if="current == index" :src="item.icon_checked"></image>
					<image style="width: 56rpx;height: 56rpx;margin-top: 8rpx;margin-bottom: 2rpx;" v-if="current != index" :src="item.icon"></image>
					<view class="text name-text" :style="[current == index ? { color: tintColor } : { color: color }]">{{ item.name }}</view>
				</view>
			</block>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabList: [],
				platform: '',
				brokerageSetObj:{}
				
			};
		},
		name: 'sunui-tabbar',
		props: {
			current: {
				type: [Number, String],
				default: 0
			},
			backgroundColor: {
				type: String,
				default: '#fff'
			},
			color: {
				type: String,
				default: '#D9D9D9'
			},
			tintColor: {
				type: String,
				default: '#3E85F7'
			},
			fixed: {
				type: [Boolean, String],
				default: false
			}
		},
		created() {
			uni.getSystemInfo({
			    success: (res) => {
					this.platform = res.platform;
			    }
			});
			//商家端查询代理基础设置——查询接口
			this.getSet();
		},
		methods: {
			switchTab(index, url) {
				this.$emit('click', index);
				console.log('this.currentTabIndex', url + '&index=' + index, url);
				
				this.$sun.navSwitch(url)
				
				
			},
		
			//商家端查询代理基础设置——查询接口
			async getSet() {
				const result = await this.$http.post({
					url: this.$api.brokerageSet,
					data: {
						id: uni.getStorageSync("merchantId")
					}
				});
				if (result.errno == 0) {
					uni.setStorageSync('brokerageSet', result.data);
					this.brokerageSetObj = result.data;
					if (this.brokerageSetObj.is_open == 1) {
						this.tabList = [
							{icon_checked: '/static/tabbar/蒙版-1.png',icon: '/static/tabbar/蒙版.png',name: '首页',url: '/pages/index/index'},
							{icon_checked: '/static/tabbar/蒙版-3.png',icon: '/static/tabbar/蒙版-2.png',name: '活动',url: '/pages/activityPgae/activity'},
							{icon_checked: '/static/tabbar/蒙版-7.png',icon: '/static/tabbar/蒙版-6.png',name: '推广',url: '/pages/partnerPromotion/promotionCenter'},
							{icon_checked: '/static/tabbar/蒙版-5.png',icon: '/static/tabbar/蒙版-4.png',name: '我的',url: '/pages/mine/mine'},
							
						]
					}else {
						this.tabList = [
							{icon_checked: '/static/tabbar/蒙版-1.png',icon: '/static/tabbar/蒙版.png',name: '首页',url: '/pages/index/index'},
							{icon_checked: '/static/tabbar/蒙版-3.png',icon: '/static/tabbar/蒙版-2.png',name: '活动',url: '/pages/activityPgae/activity'},
							
							{icon_checked: '/static/tabbar/蒙版-5.png',icon: '/static/tabbar/蒙版-4.png',name: '我的',url: '/pages/mine/mine'},
							
						]
					}
				}
			},
			// 首页底部菜单
			// async indexMenu() {
			// 	const result = await this.$http.post({
			// 		url: this.$api.indexMenu
			// 	});
			// 	console.log('首页底部菜单',result);
			// 	for (let i = 0; i < result.data.length; i++) {
			// 		if (result.data[i].url == '/wjyk_recycle/pages/my/my') {
			// 			uni.setStorageSync('tabIndex', i)
			// 		}
			// 	}

			// 	if (result.errno == 0) {
			// 		this.tabList = result.data;
			// 		console.log('首页底部菜单', result, this.tabList);
			// 	}
			// }
		}
	};
</script>
<style scoped>
	/* view {
		line-height: 1.5;
	} */

	.name-text {
		/* width: 120rpx; */
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		text-align: center;
	}

	.flexbox {
		display: flex;
	}

	.sunui-position {
		position: relative;
	}

	.sunui-badge {
		background-color: #ff3e3e;
		border-radius: 50upx;
		box-sizing: border-box;
		color: #fff;
		font-size: 24rpx;
		font-family: arial;
		padding: 6upx 12upx;
		line-height: 1.08;
	}

	.sunui-badge_dot {
		border-radius: 100%;
		font-size: 0;
		overflow: hidden;
		padding: 0;
		height: 18upx;
		width: 18upx;
	}

	.sunui-bottom,
	.sunui-bottombar {
		position: relative;
	}

	.sunui-bottom:before {
		content: '';
		background: #dbdbdb;
		height: 2rpx;
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		transform: scaleY(0.5);
		transform-origin: 0 0;
	}

	.sunui-bottombar:after {
		content: '';
		background: #dbdbdb;
		height: 2rpx;
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		transform: scaleY(0.5);
		transform-origin: 0 100%;
	}

	.sunui-tabbar {
		display: flex;
		width: 100%;
	}

	.sunui-tabbar .tablist {
		background-color: #fff;
		height: 145upx;
		width: 750upx;
		position: relative;
		z-index: 900;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}

	.sunui-tabbar .tablist.sunui-bottom:before {
		background: #bbb;
	}

	.sunui-tabbar.fixed {
		padding-top: 116upx;
	}

	.sunui-tabbar.fixed .tablist {
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.sunui-tabbar .tablist .navigator {
		flex: 1;
		text-align: center;
		height: 110upx;
	}

	.sunui-tabbar .tablist .icon {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		margin-top: 10upx;
		height: 50upx;
		width: 50upx;
		position: relative;
	}

	.sunui-tabbar .tablist .icon .iconfont {
		color: #999;
		font-size: 44upx;
	}

	.sunui-tabbar .tablist .text {
		color: #999;
		font-size: 24upx;
	}

	.sunui-tabbar .tablist .navigator.on .icon .iconfont {
		color: #ff592e;
	}

	.sunui-tabbar .tablist .navigator.on .text {
		color: #ff592e;
	}

	.sunui-tabbar .tablist .sunui-badge {
		position: absolute;
		top: -3upx;
		left: 32upx;
	}

	.sunui-tabbar .tablist .sunui-badge_dot {
		left: 36upx;
	}
</style>
